<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root = ReactDOM.createRoot(document.querySelector("#root"));
// 函数组件
const boyBookList = [
	{
		id:1,
		bookName:"射雕英雄传",
		author:"金庸"
	},{
		id:2,
		bookName: "圆月弯刀",
		author: "古龙"
	}
];
const girlBookList = [
	{
		id:3,
		bookName:"还珠格格",
		author:"琼瑶"
	},{
		id:4,
		bookName: "情深深雨朦朦",
		author:"琼瑶"
	}
	
]
{
	// 1
	// 创建一个主组件,主组件要将数组内容进行渲染
	// const App = function(){
	// 	return (
	// 		<>
	// 			<h3 style={{color:"green"}}>男生必读</h3>
	// 			{
	// 				boyBookList.map(item=>(
	// 					<div key={item.id}>
	// 						<h5>《{item.bookName}》</h5>
	// 						<p>作者：{item.author}</p>
	// 					</div>
	// 				))
	// 			}
	// 			<hr/>
	// 			<h3 style={{color:"pink"}}>女生爱看</h3>
	// 			{
	// 				girlBookList.map(item=>(
	// 					<div key={item.id}>
	// 						<h5>《{item.bookName}》</h5>
	// 						<p>作者：{item.author}</p>
	// 					</div>
	// 				))
	// 			}
	//
	// 		</>
	// 	)
	// }
	// root.render(<App></App>);
}
{
	// 2
	// 2-1:创建一个组件，将小说的内容进行呈现
	// 2-2:由于小说的内容不同，那么需要通过父组件向子组件传递内容。
	const BookList = props=>{
		// props是一个对象，对象下的属性即是父组件传递过来的属性
		// 父组件App传递过来了属性bookList,那么props对象的结构应该是：{bookList,title,style}
		return (
			<>
				<h3 style={props.style}>{props.title}</h3>
				{
					props.bookList.map(item=>(
						<div>
							<h3>{item.bookName}</h3>
							<p>作者：{item.author}</p>
						</div>
					))
				}
			</>
		)
	}
	const App = ()=>{
		// style 与你的组件结合使用，是向下传递了一个名字为style的属性而已。
		return (
			<>
				<BookList style={{color:"blue"}} title={"男生必读"} bookList={boyBookList}/>
				<hr/>
				<BookList style={{color:"pink"}} title={"女生爱看"} bookList={girlBookList}/>
			</>
		)
	};
	root.render(<App/>)
}

</script>
</html>